<template>
  <div class="border-box" :class="{ noLeftTop: type === '1' || type === '2' }">
    <span v-for="n in 8" :key="n" :class="[n > 4 ? 'h' : 'w', 'span' + n, 'span']"></span>
    <span class="triangle" v-if="type === '2'">
      <img :src="triangle" />
    </span>
    <span class="line" v-if="type === '3'"></span>
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    type: String, // 1 - 没有左上角短线  2 - 左上角有一个三角  3 - title线条
    default: ''
  },
  data() {
    return {
      triangle: require('@/assets/border_corner.png')
    }
  }
}
</script>
<style lang="less" scoped>
.border-box{
  width: 100%;
  height: 100%;
  border: 1px solid rgba(68, 196, 239, .2);
  position: relative;
  &.noLeftTop{
    .span.span1, .span.span5 {
      display: none;
    }
  }
  .span{
    position: absolute;
    z-index: 1;
    background: #00EDFE;
    &.w{
      width: 8px;
      height: 1px;
    }
    &.h{
      width: 1px;
      height: 7px;
    }
    &.span1{
      left: -1px;
      top: -1px;
    }
    &.span2{
      right: -1px;
      top: -1px;
    }
    &.span3{
      left: -1px;
      bottom: -1px;
    }
    &.span4{
      right: -1px;
      bottom: -1px;
    }
    &.span5{
      left: -1px;
      top: -1px;
    }
    &.span6{
      right: -1px;
      top: -1px;
    }
    &.span7{
      left: -1px;
      bottom: -1px;
    }
    &.span8{
      right: -1px;
      bottom: -1px;
    }
  }
  span.triangle{
    width: 16px;
    height: 19px;
    display: inline-block;
    position: absolute;
    left: -1px;
    top: -1px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  span.line{
    width: 146px;
    height: 1px;
    background: rgba(68, 196, 239, .2);
    position: absolute;
    left: 0;
    top: 36px;
    &::after{
      content: " ";
      width: 5.5px;
      height: 5.5px;
      border-radius: 50%;
      border: 1px solid rgba(68, 196, 239, .2);
      background: #021b3a;
      position: absolute;
      right: -3px;
      top: -3px;
      z-index: 1;
    }
  }
}
</style>
